import { ExtractPropTypes } from 'vue'
import { validatorColorValue, validatorSizeValue } from '../../utils'
import { UPDATE_MODEL_EVENT } from '../../constants'

/**
 * props参数
 */
export const sliderProps = {
  /** modelValue,  选择的值 */
  modelValue: {
    type: [Number, Array],
    default: (): number | number[] => {
      return 0
    }
  },
  /** 最小值 */
  min: {
    type: [String, Number],
    default: 0
  },
  /** 最大值 */
  max: {
    type: [String, Number],
    default: 100
  },
  /** 步进值 */
  step: {
    type: [String, Number],
    default: 1
  },
  /** 禁止拖动 */
  disabled: {
    type: Boolean,
    default: false
  },
  /** 被选中滑动条的颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  activeColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 未选中滑动条的颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  inactiveColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /** 滑块尺寸, 单位rpx */
  barSize: {
    type: [String, Number],
    default: 0,
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 滑动条高度, 单位rpx */
  height: {
    type: [String, Number],
    default: 0,
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  }
}
export type SliderProps = ExtractPropTypes<typeof sliderProps>

export const sliderEmits = {
  [UPDATE_MODEL_EVENT]: (value: number | Array<number>) => typeof value === 'number' || Array.isArray(value),
  change: (value: number | Array<number>) => typeof value === 'number' || Array.isArray(value)
}
export type SliderEmits = typeof sliderEmits
